<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>PHP+Ajax无刷新上传头像预览</title>

        <style type="text/css">
            a{cursor:pointer;}
            body{background: #fff none repeat scroll 0 0; color: #333; font: 12px/1.5 "Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif; background-position: left top; background-repeat: repeat; background-attachment: scroll;}
            .clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0}
            *:first-child+html .clearfix{zoom:1}
            ul,li{list-style: none;padding:0;margin:0}
            .avatar_uplpad_btn {
                background:  url("images/avatar_uplpad_btn.png") no-repeat scroll 0 0;
                display: inline-block;
                height: 30px;
                width: 82px;
            }
            .loading_bar{background: #f2f2f5 none repeat scroll 0 0;border-radius: 6px;display: inline-block;font-size: 0;height: 10px;overflow: hidden;text-align: left;width: 250px;}
            .loading_bar em{background: #fa7d3c none repeat scroll 0 0;display: inline-block;height: 10px;vertical-align: top;}
        </style>
    </head>
    <body>
        <div class="avatar_area" style="margin:120px 0 0;text-align: center;min-height: 300px">
            <a href="javascript:void(0);"class="avatar_uplpad_btn" id="avatar_uplpad_btn"></a>
            <div id="avatar_pic" style="margin:30px 0 0">
                <a  target="_blank" href="http://www.sucaihuo.com/Member/pay.html">
                    <img alt="充值" src="http://www.sucaihuo.com/Public/images/other/banner.jpg"/>
                </a>
            </div>
            <div id="loading_bar" style="display:none">
                <p id="updesc">图片上传中...</p>
                <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                <span id="percentnum">27%</span>
            </div>
        </div>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="plupload/plupload.full.min.js"></script>
        <script type="text/javascript">

            var uploader_avatar = new plupload.Uploader({//创建实例的构造方法
                runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
                browse_button: ['avatar_uplpad_btn'], // 上传按钮
                url: "ajax.php", //远程上传地址
                flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址
                silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
                filters: {
                    max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                    mime_types: [//允许文件上传类型
                        {title: "files", extensions: "jpg,png,gif,jpeg"}
                    ]
                },
                multi_selection: false, //true:ctrl多文件上传, false 单文件上传
                init: {
                    FilesAdded: function(up, files) { //文件上传前
                        $("#avatar_pic").hide();
                        $("#loading_bar").show();
                        uploader_avatar.start();
                    },
                    UploadProgress: function(up, file) { //上传中，显示进度条

                        var percent = file.percent;
                        $("#percent").css({"width": percent + "%"});
                        $("#percentnum").text(percent + "%");
                    },
                    FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                        var data = eval("(" + info.response + ")");//解析返回的json数据
                        $("#avatar_pic").html("<img  src='" + data.pic + "'/>");
                        $("#loading_bar").hide();
                        $("#avatar_pic").show();
                    },
                    Error: function(up, err) { //上传出错的时候触发
                        alert(err.message);
                        $("#loading_bar").hide();
                    }
                }
            });
            uploader_avatar.init();
        </script>
